<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .paddingStyle {
            padding: 10px 20px;
        }

        .active {
            background-color: red;
        }
    </style>
</head>

<body>

    <div id="app">
        <!-- tab切换 -->
        <ul :style="styleObj">
            <li :class="{'paddingStyle':true}" v-for="item in navlist" :key="item.id">
                <!-- 导航条部分 -->
                <span @click="changeFn(item.id)" :class="activeId==item.id?'active':''">{{item.navname}}</span>

                <!--子内容渲染 -->
                <div v-show="activeId==item.id">
                    <p v-for="child in item.listArr" :key="child.id">{{child.name}}</p>
                </div>
            </li>
        </ul>
        <!-- 内容显示区域 -->
    </div>

</body>

</html>
<script>
    // 实现选项卡的效果案例

    const { createApp } = Vue;
    const app = createApp({
        data() {
            return {
                styleObj: {
                    display: 'flex',
                    listStyle: 'none',
                },
                activeId: 1, // 默认选中的下标,点击切换该下标
                navlist: [
                    {
                        id: 1,
                        navname: '体育',
                        listArr: [
                            {
                                id: 1,
                                name: '刘翔复出了'
                            },
                            {
                                id: 2,
                                name: '姚明重返NBA'
                            }
                        ]
                    },
                    {
                        id: 2,
                        navname: '综艺',
                        listArr: [
                            {
                                id: 1,
                                name: '中国好声音停播'
                            },
                            {
                                id: 2,
                                name: '著名歌手李玟去世了'
                            }
                        ]
                    },
                    {
                        id: 3,
                        navname: '军事',
                        listArr: [
                            {
                                id: 1,
                                name: '福建号航母下水'
                            },
                            {
                                id: 2,
                                name: '日本在钓鱼岛开战'
                            }
                        ]
                    }


                ]
            }
        },
        methods: {
            // 选项卡切换事件
            changeFn(id) {
                console.log('id', id);
                this.activeId = id

            }
        }
    }).mount('#app')


</script>